<template>
  <div class="app-container" style="padding: 0px;position:relative;">
    <div style="color: #72A4FF;font-size: 20px;font-weight: bold;">报警统计</div>
    <el-row>
      <el-col :span="11">
        <el-card class="box-card" style="height:80px;background: #4A7FB0;border-radius:10px;margin-top: 40px;color: #FFFFFF;">
          <div style="font-size: 25px;text-align: center;margin-top: 8px;">月报警总数：{{numAll}}</div>
        </el-card>
      </el-col>
      <el-col :span="13">
        <count-param :chart-data="countParamObj" :height="'180px'"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { parseTime } from "@/utils/ruoyi";
  import { queryCountParam } from "@/api/basic/paramAlarmRec";
  import countParam from './countParam';

  const countParamObj = {
    titleText:'',
    legendData: [],//['ee', 'ff'],
    seriesData:[],//[{ value: 5, name: 'ee' },{ value: 6, name: 'ff' }],
  }

  export default {
    components: {countParam},
    data() {
      return {
        numAll:0,
        countParamObj:countParamObj,
        dateRange:'',
        queryCountParams:{},
      };
    },
    mounted() {
      let nowDate = new Date();
      let endTime = parseTime(nowDate,'{y}-{m}-{d} {h}:{i}:{s}');
      let befDate = new Date(nowDate.getTime() - 365 * 24 * 3600 * 1000);
      let startTime = parseTime(befDate,'{y}-{m}-{d} {h}:{i}:{s}');
      this.dateRange = [startTime,endTime];
      this.handleCountParam();
    },
    created() {

    },
    methods: {
      handleCountParam() {
        let _this = this;
        _this.countParamObj.legendData = [];
        _this.countParamObj.seriesData = [];
        _this.numAll = 0;
        queryCountParam(this.addDateRange(this.queryCountParams, this.dateRange)).then(response => {
          response.forEach(function (item) {
            _this.numAll += item.countNum;
            _this.countParamObj.legendData.push(item.paramName+' '+item.countNum);
            _this.countParamObj.seriesData.push({value: item.countNum, name: item.paramName+' '+item.countNum});
          });

        })
      },

    },
  };
</script>

